<template>
  <view class="animated fadeIn faster my-2" style="min-height: 100vh;">
    <view class="px-2">
      <view class="recommend-grid">
        <view
            v-for="(item, index) in todayRecommende"
            :key="index"
            class="recommend-data-box bg-fff rounded10 d-flex d-flex-column"
            @click="goUrl(`/subPages/courseDetails/courseDetails?id=${item.id}`)"

        >
          <image
              class="recommend-picture rounded10"
              :src="item.course_image"
              mode="aspectFill"
          ></image>
          <view class="px-1 pt-1 pb-2">
            <text class="font24" style="color: rgba(55, 189, 180, 1)">免费</text>
            <view class="text-clamp font26 color-5C5C5CFF mt-1">{{ item.course_name }}</view>
            <view class="d-flex d-flex-between d-flex-middle mt-1">
              <text class="font20 color-5C5C5CCC">
                <text>{{ item.sort }}</text>
                位同学正在学习
              </text>
            </view>
          </view>
        </view>
      </view>

      <!-- 加载提示 -->
      <view v-if="loadingType == 1" class="loading-text text-center py-2">
        加载中...
      </view>
      <view v-else-if="loadingType == 2 && todayRecommende.length > 0" class="loading-text text-center py-2">
        没有更多数据了
      </view>
    </view>

  </view>
</template>

<script>
import {homeApi} from "@/http/homeApi";
import {mapState} from "vuex"

export default {
  data() {
    return {
      formData: {
        name: ''
      },
      todayRecommende: [],
      currentPage: 1,
      loadingType: 0,
    }
  },
  computed: {
    ...mapState({
      loginState: state => state.loginState
    })
  },
  onLoad() {
    this.goTodayRecommende()
  },
  methods: {
    async goTodayRecommende() {
      let that = this
      that.loadingType = 1
      try {
        let result = await homeApi.getTodayRecommendedList({
          page: this.currentPage
        });
        if (result.data) {
          that.todayRecommende = that.todayRecommende.concat(result.data)
        }
        if (result.data && result.data.length > 9) {
          that.loadingType = 0
        } else {
          that.loadingType = 2
        }
      } catch (error) {
        that.loadingType = 2
      }
    },
  goUrl(urlPages, data) {
    if (!this.loginState) {
      uni.showToast({
        title: '未登录，请先登录！',
        icon: 'none'
      })
      setTimeout(() => {
        uni.navigateTo({
          url: '/subPages/login/login'
        })
      }, 1500)
    } else {
      uni.navigateTo({
        url: urlPages
      })
    }
  },
  },
  // 加载更多数据
  onReachBottom() {
    console.log('加载更多数据');
    if (this.loadingType == 2 || this.loadingType == 1) {
      return;
    }
    this.currentPage++
    this.goTodayRecommende();
  }
}
</script>

<style scoped>
.recommend-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.recommend-picture {
  height: 334rpx;
}

.color-5C5C5CCC {
  color: #5C5C5CCC;
}


</style>
